<template>
  <div class="main">
    <view class="item2">
      <view class="flex justifyBetween alignCenter">
        <view class="bold fz14">您的学历是</view>
      </view>
      <view class="grids education">
        <view class="grid" @click="eduClick(index)" :class="{ active: index == current }" v-for="(item, index) in education" :key="index">{{item.configValue}}</view>
      </view>
    </view>

    <view class="item">
      <view class="flex justifyBetween alignCenter">
        <view class="bold fz14">您的学校是</view>
      </view>
      <view class="search">
        <uv-search @change="searchSchool" placeholder="请输入学校" v-model="valueDate.school" :showAction="false"></uv-search>
        <scroll-view class="search-list" scroll-y="true">
          <view class="box fz14" @click="schoolClick(item)" v-for="item in schools" :key="item.id">{{item.name}}</view>
        </scroll-view>
      </view>
    </view>

    <view class="next flex justifyFlexEnd">
      <uv-button @click="next" :customStyle="nextBtnStyle" text="下一步" shape="circle" color="linear-gradient(to right, rgba(178, 161, 255, 1), rgba(211, 167, 249, 1))"></uv-button>
    </view>
  </div>
</template>

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
let props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue", "fatherMethod"]);

let education = ref([]);
let current = ref(0);
let schools = ref([]);
let nextBtnStyle = ref({
  width: "100px",
  boxShadow: "0 2px 8px 2px rgba(182, 159, 254, 0.53)",
});

const valueDate = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

onMounted(() => {
  getDict();
});

let searchSchool = async (value) => {
  let data = await proxy.$apis.getSchoolName({
    type: education.value[current.value].configValue,
    content: value,
  });
  schools.value = data;
};

let schoolClick = (item) => {
  valueDate.value.school = item.name;
  schools.value = [];
};

let getDict = async () => {
  let data = await proxy.$apis.getOpenScreenMsg({
    configKey: "education_value",
  });
  education.value = data;
};

let eduClick = (index) => {
  current.value = index;
  valueDate.value.edu = education.value[current.value].configValue;
};

let next = () => {
  if (!valueDate.value.school) return proxy.$utils.showToast("请选择学校");
  emit("fatherMethod");
};
</script>



<style lang="scss" scoped>
.item {
  margin-top: 44px;
  .search {
    margin-top: 25px;
  }
}
.education {
  grid-template-columns: repeat(4, minmax(0px, 1fr));
  margin-top: 15px;
  gap: 10px 8px;
  .grid {
    font-size: 10px;
    color: #999;
    border: 1px solid #b0b0b0;
    border-radius: 12.5px;
    text-align: center;
    padding: 5px 15px;
  }
  .active {
    background: linear-gradient(to right, #b2a1ff, #d3a7f9);
    border: 1px solid transparent;
    box-shadow: 0 2px 8px 2px rgba(182, 159, 254, 0.53);
    color: white;
  }
}
.search-list {
  color: #333333;
  max-height: 300px;
  .box {
    margin-top: 10px;
  }
}
.next {
  margin-right: 10vw;
  margin-top: 10vw;
}
::v-deep ::-webkit-scrollbar {
  /* 滚动条整体样式 */
  display: block;
  width: 10rpx !important;
  height: 13px !important;
  -webkit-appearance: auto !important;
  background: transparent;
  overflow: auto !important;
  cursor: pointer;
}
::v-deep ::-webkit-scrollbar-thumb {
  /* 滚动条里面小方块 */
  border-radius: 10px !important;
  box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
  background-color: #b2a1ff !important;
}
::v-deep ::-webkit-scrollbar-track {
  /* 滚动条 */
  border-radius: 10rpx !important;
  box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
  background-color: #ededed !important;
}
</style>
